<template>
  <div>
    <el-card class="account-container">
      <el-form
        :model="nameForm"
        :rules="rules"
        ref="nameRef"
        label-width="80px"
        label-position="right"
        class="demo-ruleForm"
      >
        <el-form-item label="登录名：" prop="loginName">
          <el-input style="width: 200px" v-model="nameForm.loginName"></el-input>
        </el-form-item>
        <el-form-item label="昵称：" prop="nickName">
          <el-input style="width: 200px" v-model="nameForm.nickName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitName">确认修改111</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="account-container">
      <el-form
        :model="passForm"
        :rules="rules"
        ref="passRef"
        label-width="80px"
        label-position="right"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码：" prop="oldpass">
          <el-input style="width: 200px" v-model="passForm.oldpass"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newpass">
          <el-input style="width: 200px" v-model="passForm.newpass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitPass">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "@/utils/axios";
import { ElMessage } from "element-plus";
import md5 from "js-md5";
export default {
  name: "Account",
  setup() {
    const nameRef = ref(null);
    const passRef = ref(null);
    const state = reactive({
      user: null,
      nameForm: {
        loginName: "",
        nickName: ""
      },
      passForm: {
        oldpass: "",
        newpass: ""
      },
      rules: {
        loginName: [
          { required: "true", message: "登录名不能为空", trigger: ["change"] }
        ],
        nickName: [
          { required: "true", message: "昵称不能为空", trigger: ["change"] }
        ],
        oldpass: [
          { required: "true", message: "原密码不能为空", trigger: ["change"] }
        ],
        newpass: [
          { required: "true", message: "新密码不能为空", trigger: ["change"] }
        ]
      }
    });
    onMounted(() => {
      axios.get("/adminUser/profile").then(res => {
        state.user = res;
        state.nameForm.loginName = res.loginUserName;
        state.nameForm.nickName = res.nickName;
      });
    });
    const submitName = () => {
      nameRef.value.validate(vaild => {
        if (vaild) {
          axios
            .put("/adminUser/name", {
              loginUserName: state.nameForm.loginName,
              nickName: state.nameForm.nickName
            })
            .then(() => {
              ElMessage.success("修改成功");
              window.location.reload();
            });
        }
      });
    };
    const submitPass = () => {
      passRef.value.validate(vaild => {
        if (vaild) {
          axios
            .put("/adminUser/password", {
              originalPassword: md5(state.passForm.oldpass),
              newPassword: md5(state.passForm.newpass)
            })
            .then(() => {
              ElMessage.success("修改成功");
              window.location.reload();
            });
        }
      });
    };
    return {
      ...toRefs(state),
      nameRef,
      passRef,
      submitName,
      submitPass
    };
  }
};
</script>

<style>
.account-container {
  margin-bottom: 20px;
}
</style>